<!-- 此组件是当时想用来像参数模板的选中当前页面控件那样用来选择组件的 -->
<!-- 已废弃 -->
<template>
    <component :is="tag" :label="label" label-position="left">
        <el-button type="primary" plain @click="open" v-bind="$attrs">
            {{$attrs.value||'编辑'}}
        </el-button>
    </component>
</template>
<script setup lang="tsx">
import {computed} from 'vue'
import {openIframe} from '@dashboard/utils'
import {ElButton} from 'element-plus'
import PreView from '@dashboard/render/src/index.vue'
import {data} from '@drag/store'
// const value = defineModel<any>()
const {label} = defineProps<{
    label:string
}>()
defineOptions({inheritAttrs: false})
//当前标签为空时，不显示标签。因为el-form-item为空时会有bug
const tag = computed(()=>label?'el-form-item':'div')
const open = ()=>{
    let close = openIframe({
            render(){
                return (
                    <div style="width:100%;height:100%;padding: 10px;box-sizing: border-box;">
                        <div style="height:100%;width:100;border:1px solid rgb(223 223 223);border-radius:8px;">
                            <div style="height:40px;width:100%;padding: 8px 15px;box-sizing: border-box;display: grid;grid-template-columns: 30% 70%;border-bottom:1px solid rgb(233 233 233);">
                                <div style="height:100%;">
                                </div>
                                <div style="height:100%;display:flex;justify-content: flex-end;">
                                    <ElButton type="info" size="small" style="height:100%;" onClick={this.close}>取消</ElButton>
                                    <ElButton type="primary" size="small" style="height:100%;" onClick={this.save}>确定</ElButton>
                                </div>
                            </div>
                            <div style="height:calc(100% - 40px);width:100%;background:#f5f5f5;">
                                <PreView modelValue={data.value} />
                            </div>
                        </div>
                    </div>
                )
            },
            mounted() {
                // (document.querySelector('.dashboard-dialog-title') as any).style.borderBottom = 0;
                // (document.querySelector('.dashboard-dialog-content>div') as any).style.padding = 0;
                // (document.querySelector('.dashboard-dialog-content>div>div') as any).style.borderRadius = 0;
            },
            methods:{
                close(){
                    close()
                },
                save(){
                    close()
                },
            }
        })
}
// const opens = ()=>{
//     let close = showMsg({
//         title:'选择组件',
//         component:{
//             render(){
//                 return (
//                     <div style="width:100%;height:100%;padding: 10px;box-sizing: border-box;">
//                         <div style="height:100%;width:100;border:1px solid rgb(223 223 223);border-radius:8px;">
//                             <div style="height:40px;width:100%;padding: 8px 15px;box-sizing: border-box;display: grid;grid-template-columns: 30% 70%;border-bottom:1px solid rgb(233 233 233);">
//                                 <div style="height:100%;">
//                                 </div>
//                                 <div style="height:100%;display:flex;justify-content: flex-end;">
//                                     <ElButton type="primary" size="small" style="height:100%;" onClick={this.save}>确定</ElButton>
//                                 </div>
//                             </div>
//                             <div style="height:calc(100% - 40px);width:100%;background:#f5f5f5;">
//                                 <PreView modelValue={data.value} />
//                             </div>
//                         </div>
//                     </div>
//                 )
//             },
//             mounted() {
//                 (document.querySelector('.dashboard-dialog-title') as any).style.borderBottom = 0;
//                 (document.querySelector('.dashboard-dialog-content>div') as any).style.padding = 0;
//                 (document.querySelector('.dashboard-dialog-content>div>div') as any).style.borderRadius = 0;
//             },
//             methods:{
//                 save(){
//                     close()
//                 },
//             }
//         }
//     })
    
// }
</script>
<style scoped>
.el-form-item>:deep(.el-form-item__content){
    justify-content: center;
}
</style>